<template>
  <div class="student-view">
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">
          <i class="el-icon-user-solid"></i>
          学生管理
        </h1>
        <p class="page-description">管理学校的学生信息</p>
      </div>
      <div class="header-right">
        <el-button type="primary" icon="el-icon-plus" @click="showAddDialog">新增学生</el-button>
      </div>
    </div>
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="学生名"><el-input v-model="searchForm.name" placeholder="请输入学生名" clearable /></el-form-item>
    <el-form-item label="专业名"><el-input v-model="searchForm.majorName" placeholder="请输入专业名" clearable /></el-form-item>
    <el-form-item label="班级名"><el-input v-model="searchForm.className" placeholder="请输入班级名" clearable /></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-card">
      <el-table :data="tableData" style="width:100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="学生姓名" />
        <el-table-column prop="number" label="学号" />
        <el-table-column prop="sex" label="性别" width="80"><template slot-scope="scope">{{ scope.row.sex === 1 ? '男' : '女' }}</template></el-table-column>
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="className" label="班级" />
        <el-table-column prop="birthday" label="生日" />
        <el-table-column label="操作" width="160" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" class="action-btn edit-btn">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" class="action-btn delete-btn">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,50,100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </el-card>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12"><el-form-item label="学生姓名" prop="name"><el-input v-model="form.name" placeholder="请输入学生姓名" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="学号" prop="number"><el-input v-model="form.number" placeholder="请输入12位学号" /></el-form-item></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12"><el-form-item label="性别" prop="sex"><el-radio-group v-model="form.sex"><el-radio :label="0">女</el-radio><el-radio :label="1">男</el-radio></el-radio-group></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="生日" prop="birthday"><el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;" /></el-form-item></el-col>
        </el-row>
        <el-form-item label="邮箱" prop="email"><el-input v-model="form.email" placeholder="请输入邮箱" /></el-form-item>
        <el-form-item label="所属班级" prop="classId"><el-select v-model="form.classId" placeholder="请选择所属班级"><el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item>
        <el-form-item label="密码" prop="password"><el-input v-model="form.password" type="password" placeholder="请输入密码" /></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer"><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" @click="handleSubmit">确定</el-button></div>
    </el-dialog>
  </div>
</template>
<script>
import { getStudentPage, getStudentPageCount, saveStudent, deleteStudent, getStudentById, getClassNames } from '@/api'
export default { name:'StudentView', data(){return{ searchForm:{ name:'', majorName:'', className:'' }, tableData:[], classOptions:[], currentPage:1, pageSize:10, total:0, dialogVisible:false, dialogTitle:'添加学生', form:{ id:-1, name:'', number:'', sex:1, email:'123@qq.com', birthday:'', classId:'', password:'' }, rules:{ name:[{ required:true, message:'请输入学生姓名', trigger:'blur'}], number:[{required:true,message:'请输入学号',trigger:'blur'},{ pattern:/^\d{12}$/, message:'学号必须为12位数字', trigger:'blur'}], sex:[{required:true,message:'请选择性别',trigger:'change'}], email:[{required:true,message:'请输入邮箱',trigger:'blur'},{ type:'email', message:'请输入正确的邮箱格式', trigger:'blur'}], birthday:[{ required:true, message:'请选择生日', trigger:'change'}], classId:[{required:true,message:'请选择所属班级',trigger:'change'}], password:[{required:true,message:'请输入密码',trigger:'blur'}] } }}, mounted(){ this.loadData(); this.loadClasses(); }, methods:{ async loadData(){ try{ const countRes = await getStudentPageCount(this.searchForm); this.total = countRes.data * this.pageSize; const res = await getStudentPage(this.currentPage, this.searchForm); this.tableData = res.data || [] } catch(e){ this.$message.error('加载数据失败') } }, async loadClasses(){ try{ const res = await getClassNames(); this.classOptions = res.data || [] } catch(e){ } }, handleSearch(){ this.currentPage=1; this.loadData() }, resetSearch(){ this.searchForm={ name:'', majorName:'', className:'' }; this.handleSearch() }, showAddDialog(){ this.dialogTitle='添加学生'; this.form={ id:-1, name:'', number:'', sex:1, email:'123@qq.com', birthday:'', classId:'', password:'' }; this.dialogVisible=true }, async handleEdit(row){ try{ const res = await getStudentById(row.id); this.dialogTitle='编辑学生'; this.form={ ...res.data }; this.dialogVisible=true } catch(e){ this.$message.error('获取学生信息失败') } }, handleDelete(row){ this.$confirm('确定删除该学生吗?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).then(async()=>{ try{ await deleteStudent(row.id); this.$message.success('删除成功'); this.loadData() }catch(e){ this.$message.error('删除失败') } }) }, async handleSubmit(){ this.$refs.form.validate(async valid=>{ if(valid){ try{ await saveStudent(this.form); this.$message.success(this.form.id===-1?'添加成功':'编辑成功'); this.dialogVisible=false; this.loadData() }catch(e){ this.$message.error(this.form.id===-1?'添加失败':'编辑失败') } } }) }, handleSizeChange(val){ this.pageSize=val; this.loadData() }, handleCurrentChange(val){ this.currentPage=val; this.loadData() } } }
</script>
<style scoped>
.student-view{ padding:24px; min-height:calc(100vh - 120px); background:#f5f6fa; }
.page-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; background:white; padding:24px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1); border:1px solid #e8e9ea; }
.header-left{ flex:1; }
.page-title{ margin:0 0 8px 0; font-size:28px; font-weight:700; color:#1a1a1a; display:flex; align-items:center; }
.page-title i{ margin-right:12px; color:#409eff; font-size:32px; }
.page-description{ margin:0; color:#6c757d; font-size:15px; font-weight:400; }
.header-right{ display:flex; align-items:center; }
.search-card{ margin-bottom:20px; }
.table-card{ margin-bottom:20px; }
.el-pagination{ margin-top:20px; text-align:right; }
.action-buttons{ display:flex; gap:8px; justify-content:center; align-items:center; }
:deep(.action-btn){ width:60px!important; height:28px!important; padding:0!important; border-radius:4px!important; font-size:12px!important; display:flex!important; align-items:center!important; justify-content:center!important; min-width:60px!important; }
:deep(.edit-btn){ background-color:#409eff!important; border-color:#409eff!important; color:white!important; }
:deep(.edit-btn:hover){ background-color:#66b1ff!important; border-color:#66b1ff!important; }
:deep(.delete-btn){ background-color:#f56c6c!important; border-color:#f56c6c!important; color:white!important; }
:deep(.delete-btn:hover){ background-color:#f78989!important; border-color:#f78989!important; }
</style>
